<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>转账页面</title>  
    <style>  
       body {  
          font-family: Arial, sans-serif;  
          background-color: #f4f4f4;  
          margin: 0;  
          padding: 20px;  
          display: flex;  
          justify-content: center;  
          align-items: center;  
          height: 100vh;  
      }  
        .container {
          background-color: #fff;  
          padding: 20px;  
          border-radius: 8px;  
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
          width: 300px;  
          text-align: center;   }  
        input[type="text"], input[type="number"] { 
          width: 100%; padding: 10px; margin-bottom: 10px; 
        }  
         .form-group {  
          display: flex; 
          align-items: center; 
          text-align: right;
          margin-bottom: 15px; 
      }  
        
      .form-group label {  
          flex-grow: 1; 
          margin-right: 10px; 
          margin-bottom: 5px;  
          color: #666;  
      }  
        
      .form-group input {  
          width: 70%; 
          padding: 8px;  
          box-sizing: border-box;  
          border: 1px solid #ccc;  
          border-radius: 4px;  
      }  
        
      .form-group input:focus {  
          border-color: #007bff;  
          outline: none;  
      }  
         
      .form-group button {  
          width: 100%;  
          padding: 10px;  
          background-color: #007bff;  
          color: white;  
          border: none;  
          border-radius: 4px;  
          cursor: pointer;  
          font-size: 16px;  
      }  
        
      .form-group button:hover {  
          background-color: #0056b3;  
      }  
    </style>  
    <script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>
</head>  
<body>  
    <div class="container">  
        <h2>转账</h2>  
        <form id="transferForm">  
       		<div class="form-group">  
                <label for="recipient-name">收款人:</label>  
            	<input type="text" id="recipient-name" name="recipient-name" placeholder="请输入收款人姓名" required>  
            </div>  
            
            <div class="form-group">  
	            <label for="recipient-number">收款账户:</label>  
	            <input type="text" id="recipient-number" name="recipient-number" placeholder="请输入收款账号" required> 
 			</div>  
 			
 			<div class="form-group">  
	            <label for="amount">转账金额:</label>  
	            <input type="number" step="0.01" id="amount" name="amount"  placeholder="请输入转账金额"  required>  
            </div>  
            
            <div class="form-group">  
	            <label for="sender-number">付款账户:</label>  
	            <input type="text" id="sender-number" name="sender-number" placeholder="请输入转账账号" required>  
  			</div>  
  			
  			<div class="form-group">  
            	<button type="button" onclick="submitTransfer()">转账</button>  
            </div>  
        </form>  
  
    </div>  
  
    <script>  
        function submitTransfer() {  
        	console.info()
            var json_str = JSON.stringify({
            	 recipientName:$("#recipient-name").val(), recipientNumber:$("#recipient-number").val(),
            	 amount:$("#amount").val(), senderNumber:$("#sender-number").val()
			});
			$.ajax({
				type:"post",
				data:json_str,
				url:"/experiment04/transfer",
				contentType : "application/json",
				success:function(data){
					if(data == 10000){
						alert("转账成功");
					}else{
						alert(data.msg);
					}
				}
			})
        }  
    </script>  
</body>  
</html>